<script setup lang="ts">
  import { ref, watch } from 'vue'
  import Module from '@/components/pages/param-set/return-factory/module/Index.vue'
  import { onMounted } from 'vue'
  import { ActiveTab, Tabs } from './types'
  import { nextTick } from 'vue'
  import CustomField from '@/components/pages/param-set/return-factory/fields/Index.vue'
  import { useRoute } from 'vue-router'
  import routeComponentName from '@/config/route-component-name'
  import AddressList from './components/address-list/List.vue'

  defineOptions({
    name: routeComponentName.setting.returnFactorySet,
  })

  // 标签列表
  const tabs = ref<Array<Tabs>>([
    {
      label: '返厂模块',
      value: 'module',
    },
    {
      label: '自定义字段',
      value: 'customField',
    },
    {
      label: '地址库',
      value: 'addressList',
    },
  ])

  // 激活路由对象
  const route = useRoute()

  // 选中的标签
  const activeTab = ref<ActiveTab>('module')

  // 模块组件实例
  const moduleInstance = ref<InstanceType<typeof Module> | null>(null)

  // 自定义字段组件实例
  const customFieldInstance = ref<InstanceType<typeof CustomField> | null>(null)

  // 地址库组件实例
  const addressListInstance = ref<InstanceType<typeof AddressList> | null>(null)

  /**
   * 获取列表
   */
  const getList = () => {
    nextTick(() => {
      switch (activeTab.value) {
        case 'module':
          if (moduleInstance.value) {
            moduleInstance.value.getList()
          }
          break
        case 'customField':
          if (customFieldInstance.value) {
            customFieldInstance.value.getList()
          }
          break
        case 'addressList':
          if (addressListInstance.value) {
            addressListInstance.value.getList()
          }
      }
    })
  }

  /**
   * 切换标签事件
   * @param tab
   */
  const handleChangeTab = (tab: ActiveTab) => {
    activeTab.value = tab
    getList()
  }

  watch(
    () => route.name,
    (value) => {
      if (value === 'repairSet') {
        getList()
      }
    },
    { immediate: true },
  )

  onMounted(() => {
    getList()
  })
</script>

<template>
  <div class="return-factory-set-wrapper">
    <div class="return-factory-set app-container-inner">
      <div class="content">
        <div class="sidebar">
          <div
            v-for="(module, moduleIndex) in tabs"
            :key="moduleIndex"
            :class="{ 'sidebar-item': true, 'sidebar-item-active': activeTab === module.value }"
            @click="handleChangeTab(module.value)"
            >{{ module.label }}</div
          >
        </div>
        <div class="main">
          <module v-if="activeTab === 'module'" ref="moduleInstance" />
          <custom-field v-if="activeTab === 'customField'" ref="customFieldInstance" />
          <address-list v-if="activeTab === 'addressList'" ref="addressListInstance" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .return-factory-set-wrapper {
    width: 100%;
    height: calc(100vh - 92px);
    box-sizing: border-box;
    padding: 12px;

    .return-factory-set {
      width: 100%;
      height: 100%;
      padding: 12px;
      box-sizing: border-box;
      background-color: #fff;

      .content {
        border: 1px solid #ebf6f6;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;

        .sidebar {
          border-right: 1px solid #ebf6f6;
          width: 170px;
          box-sizing: border-box;
          height: 100%;

          .sidebar-item {
            height: 40px;
            cursor: pointer;
            box-sizing: border-box;
            padding-right: 20px;
            text-align: right;
            line-height: 40px;
            font-size: 14px;

            &:hover {
              color: $primaryColor;
            }
          }

          .sidebar-item-active {
            background-color: rgba(0, 124, 255, 0.07);
            border-left: 3px solid #007cff;
            color: #007cff;
          }
        }

        .main {
          flex: 1;
          width: 0;
        }
      }
    }
  }
</style>
